<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        更新记录
      </div>
      <q-space></q-space>
    </div>
    <div class="q-pa-sm shadow-2 q-mb-md items-center" style="min-height: 100px">

      <q-timeline v-if="!loadingState" class="q-ml-md" color="primary" layout="dense">
        <q-timeline-entry v-for="i in realDisplayRecordNum" :key="i"
          :subtitle="$d.updateRecords[i-1].dt" :title="$d.updateRecords[i-1].title">
          <ul>
            <li v-for="(item, itemIdx) in $d.updateRecords[i-1].items" :key="itemIdx">
              <q-icon
                :name="getIconByType(item.type)" />&nbsp;{{item.content}}
            </li>
          </ul>
        </q-timeline-entry>
      </q-timeline>
      <q-btn v-if="!loadingState && maxDisplayRecordNum<$d.updateRecords.length" class="full-width bg-grey-2"
        @click="maxDisplayRecordNum+=5">{{$t('显示更多')}}
      </q-btn>
      <q-inner-loading :showing="loadingState">
        <q-spinner color="primary" size="50px" />
      </q-inner-loading>

    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'updateRecordStd'
}
</script>
<script lang="ts" setup>
import {useTitleHelper} from '../../hooks/titleHelper'
import {computed, reactive, ref} from 'vue'
import {useI18n} from 'vue-i18n'

const {t} = useI18n()

const pageTitle = t('更新记录')
useTitleHelper(pageTitle)

const getIconByType = function (type: string) {
  switch (type) {
    case 'new':
      return 'grade'
    case 'fix':
      return 'bug_report'
    default:
      return 'label_important'
  }
}

// 表示当前最大显示记录数
let maxDisplayRecordNum = ref(5)
// 是否处于数据列表加载的状态
let loadingState = ref(false)

interface UpdateRecordsItems {
  type: string
  content: string
}

interface updateRecordsInfo {
  title: string | null
  dt: string
  items: UpdateRecordsItems[]
}

let $d = reactive({
  updateRecords: [] as updateRecordsInfo[],
})

let loadListData = function () {
  loadingState.value = true
  $f.feAxios
    .get<updateRecordsInfo[]>($f.getSiteUrl('update-record.json'))
    .then((resp) => {
      $d.updateRecords = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

const realDisplayRecordNum = computed(() => {
    return maxDisplayRecordNum.value < $d.updateRecords.length
      ? maxDisplayRecordNum.value : $d.updateRecords.length
  }
)

// region 初始化
loadListData()
// endregion
</script>

<style lang="sass" scoped>
ul
  list-style: none
  padding-left: 12px
</style>
